<template>
	<view class="content">
		<collection :list="list" :total="total"/>
		<u-loadmore v-if="total != 0" :status="status" />
		<u-popup :show="show" mode="right">
			<view class="popup">
				<view class="tip">请选择检索条件</view>
				<view class="title">市场类型</view>
				<view class="row">
					<u-grid :border="false" col="3">
						<u-grid-item class="grid-item">
							<view class="btn" @click="onFilter('marketType', null)" :class="{active: query.marketType == null}">全部</view>
						</u-grid-item>
						<u-grid-item class="grid-item" v-for="(v, k) in MarketType">
							<view class="btn" @click="onFilter('marketType', k)" :class="{active: query.marketType == k}">{{v}}</view>
						</u-grid-item>
					</u-grid>		
				</view>
				<view class="title">藏品状态</view>
				<view class="row">
					<u-grid :border="false" col="2">
						<u-grid-item class="grid-item">
							<view class="btn" @click="onFilter('status', null)" :class="{active: query.status == null}">全部</view>
						</u-grid-item>
						<u-grid-item class="grid-item" v-for="(v, k) in CollectionStatus">
							<view class="btn" @click="onFilter('status', k)" :class="{active: query.status == k}">{{v}}</view>
						</u-grid-item>
					</u-grid>		
				</view>
				<view class="light-btn close" @click="show = false">关闭</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex'
	import collection from '../mine/components/collection'
	import {CollectionStatus, MarketType} from '@/common/config/enums.js'
	export default {
		components: {
			collection
		},
		data() {
			return {
				show: false,
				query: {
					page: 1,
					limit: 10,
					marketType: null,
					status: null
				},
				list: [],
				status: 'loadmore',
				total: null,
				CollectionStatus,
				MarketType
			}
		},
		onNavigationBarButtonTap() {
			this.show = true
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh();
			this.resetPage();
			this.getList();
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if(this.status == 'nomore'){
				return;
			}
			this.query.page += 1
			this.getList()
		},
		methods: {
			...mapActions('user', ['getOwnCollectionList']),
			resetPage(){
				this.query.page = 1
				this.list = []
				this.status = 'loadmore'
			},
			onFilter(field, value){
				this.resetPage()
				this.query[field] = value
				this.getList()
				this.show = false
			},
			getList(){
				this.status = 'loading'
				this.getOwnCollectionList(this.query).then(res => {	
					this.list = this.list.concat(res.rows)
					this.total = res.total
					if(this.query.page == res.pages){
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.popup{
			background-color: #0b0b30;
			height: 100%;
			width: 400rpx;
			padding: 0rpx 20rpx;
			.tip{
				padding: 50rpx 0;
				font-weight: bold;
			}
			.row{
				padding: 20rpx 0;
				margin-bottom: 40rpx;
				.btn{
					background-color: #484b5e;
					width: 95%;
					padding: 6rpx 0;
					text-align: center;
					font-size: 26rpx;
					margin-bottom: 8rpx;
				}
				.active{
					background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
					background-size: 400%;
				}
			}
			.close{
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}
</style>
